<template>
  <view>
    <user-header :level="Level" :pageTitle="pageTitle">
      <template slot="right">
        <view class="u-flex u-m-t-20 u-m-r-10" @click="showSearchPopup = true">
          <text style="color: #fff" class="u-m-r-10">筛选</text>
          <u-icon color="#fff" name="grid"></u-icon>
        </view>
      </template>
    </user-header>
    <view style="padding: 0 30rpx; margin-top: -36rpx;">
      <statistics-card
        :level1="FirstDealerCount"
        :level2="DoubleDealerCount"
        :level3="DoorDealerCount"
      ></statistics-card>

      <view class="customer-list">
        <view class="customer-item u-flex-col" v-for="(item, index) in list" :key="index">
          <text class="name">{{ item.Name }}</text>
          <view class="u-flex u-row-between">
            <view class="left u-flex-col">
              <text>负责人：{{ item.NickName }}</text>
              <text class="u-m-t-30">联系电话：{{ item.Mobile }}</text>
            </view>
            <view class="right u-flex-col">
              <text>公司层级：{{ item.LevelName }}</text>
              <text class="u-m-t-30">下辖数量：{{ item.Jurisdiction_Number }}</text>
            </view>
          </view>
          <view class="btn-group u-m-t-20">
            <u-button class="u-m-l-30" v-if="Level == -1" size="mini" @click="onItemClick(-1, item)">下辖一级</u-button>
            <template v-else>
              <u-button class="u-m-l-30" v-if="Level == 1" size="mini" @click="onItemClick(1, item)">下辖二级</u-button>
              <u-button class="u-m-l-30" v-if="Level == 2" size="mini" @click="onItemClick(4, item)">下辖门店</u-button>
              <u-button class="u-m-l-30" size="mini" @click="onItemClick(2, item)">查看</u-button>
              <u-button class="u-m-l-30" size="mini" @click="onItemClick(3, item)">更多操作</u-button>
            </template>
          </view>
        </view>
      </view>
      <u-loadmore :status="status" />
    </view>

    <u-popup closeable safe-area-inset-bottom v-model="showSearchPopup" mode="right" :border-radius="20" width="600">
      <dealer-search :level="Level" v-model="search" @change="onSearchChange"></dealer-search>
    </u-popup>

    <u-modal
      title="更多操作"
      :maskCloseAble="true"
      v-model="showMoreAction"
      :showCancelButton="false"
      :show-confirm-button="false"
    >
      <view class="u-flex u-row-center close" @click="showMoreAction = false">
        <u-icon :size="20" name="close"></u-icon>
      </view>
      <view class="u-p-60 u-flex-col">
        <u-button v-if="Level == 1" size="medium" :custom-style="actionBtnStyle" @click="toStoreApplyPage(3)">
          新增二级
        </u-button>
        <u-button v-if="Level == 2" size="medium" :custom-style="actionBtnStyle" @click="toStoreApplyPage(1)">
          新增门店
        </u-button>
        <u-button
          v-if="Level == 1 || Level == 2"
          size="medium"
          :custom-style="actionBtnStyle"
          @click="toStoreApplyPage(2)"
        >
          新门店申请
        </u-button>
        <block v-if="showCloseAndShiftBtn">
          <u-button size="medium" :custom-style="actionBtnStyle" @click="toClosePage(1)">关停</u-button>
          <u-button size="medium" :custom-style="actionBtnStyle" @click="toClosePage(2)">并转</u-button>
        </block>
      </view>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showSearchPopup: false,
      showMoreAction: false,
      // 默认1级
      Level: 1,
      // 经销商父级ID
      ParentId: null,
      status: 'loadmore',
      btnStyle: {
        fontSize: '26rpx',
        height: '60rpx',
        lineHeight: '60rpx',
        color: '#2E2F32'
      },
      actionBtnStyle: {
        backgroundColor: '#FF7A23',
        color: '#ffffff',
        marginBottom: '30rpx',
        width: '300rpx'
      },
      FirstDealerCount: 0,
      DoubleDealerCount: 0,
      DoorDealerCount: 0,
      IsFirst: true,
      DealerList: {
        Items: [],
        PageCount: 0,
        PageIndex: 0,
        PageSize: 10,
        TotalCount: 0
      },
      currentDealer: {},
      list: [],

      DealerName: '',
      searchParams: {
        DirectorId: null,
        SalseId: null,
        DealerTerminalId: null,
        TeamId: null,
        DealerName: '',
        State: '1',
        DSA_State: '0',
        ChannelType: '',
        CC_Type: ''
      },
      search: {},

      showCloseAndShiftBtn: true
    };
  },

  onLoad(options) {
    if (options.Level) {
      this.Level = options.Level;
      // “经销商状态（1：正常    99：关停    2：全部）”，
      // “维护状态（0：全部    1：待维护     2：审核中    3：已维护）”，
      // 一级时经销商状态默认正常，维护状态默认已维护。二级和门店时，经销商状态默认正常，维护状态默认全部
    }
    if (options.ParentId) {
      this.ParentId = options.ParentId;
    }

    if (this.Level == 1) {
      this.searchParams.State = '1';
      this.searchParams.DSA_State = '0';
    } else {
      this.searchParams.State = '1';
      this.searchParams.DSA_State = '0';
    }

    this.getDealerList();

    if (this.$isWeixin()) {
      this.$setTitle(this.pageTitle);
    }
  },

  // 触底事件
  onReachBottom() {
    if (this.DealerList.PageIndex + 1 >= this.DealerList.PageCount) return;
    this.status = 'loading';
    this.DealerList.PageIndex = this.DealerList.PageIndex + 1;
    this.getDealerList();
  },

  computed: {
    pageTitle() {
      if (this.Level == -1) {
        return '总代';
      } else if (this.Level == 1) {
        return '一级经销商';
      } else if (this.Level == 2) {
        return '二级经销商';
      } else if (this.Level == 3) {
        return '门店';
      } else {
        return '';
      }
    }
  },

  methods: {
    getDealerList(reload) {
      this.status = 'loading';
      this.$u.api
        .getDealerList(
          Object.assign(
            {
              IsFirst: this.IsFirst,
              Level: this.Level,
              Pageindex: this.DealerList.PageIndex,
              Pagesize: this.DealerList.PageSize,
              ParentId: this.ParentId
            },
            this.searchParams
          )
        )
        .then(res => {
          const {
            ResultCode,
            FirstDealerCount,
            DoubleDealerCount,
            DoorDealerCount,
            DealerList,
            SalseList,
            DealerTerminalList,
            DirectorList,
            TeamList
          } = res;
          if (ResultCode === 1) {
            this.IsFirst = false;
            this.FirstDealerCount = FirstDealerCount;
            this.DoubleDealerCount = DoubleDealerCount;
            this.DoorDealerCount = DoorDealerCount;

            if (DealerList) {
              this.DealerList = DealerList;
              if (reload) {
                this.list = DealerList.Items;
              } else {
                this.list.push(...DealerList.Items);
              }

              if (this.DealerList.PageIndex + 1 >= this.DealerList.PageCount) {
                this.status = 'nomore';
              }
            } else {
              this.list = [];
              this.status = 'nomore';
            }
          }
        });
    },

    // 按钮操作事件
    onItemClick(index, item) {
      if (item.IsFictitious == 1) {
        this.showCloseAndShiftBtn = false;
      }

      //  1 二级,  2 公司详情  3 更多操作 4 下辖门店
      switch (index) {
        case -1:
          this.$u.route({
            url: 'pages/home/dealer/index',
            params: {
              ParentId: item.DealerId,
              Level: 1
            }
          });
          return false;
          break;
        case 1:
          this.$u.route({
            url: 'pages/home/dealer/index',
            params: {
              ParentId: item.DealerId,
              Level: 2
            }
          });
          return false;
          break;
        case 4:
          this.$u.route({
            url: 'pages/home/dealer/index',
            params: {
              ParentId: item.DealerId,
              Level: 3
            }
          });
          return false;
          break;
        case 2:
          this.$u.route({
            url: 'pages/home/dealer/detail/index',
            params: {
              DealerId: item.DealerId,
              Level: this.Level
            }
          });
          break;
        case 3:
          this.showMoreAction = true;
          this.currentDealer = Object.assign({}, item);
          break;
        default:
          return false;
      }
    },

    onSearchChange(e) {
      console.log(e);
      this.showSearchPopup = false;
      this.DealerList.PageIndex = 0;
      this.searchParams = e;
      this.getDealerList(true);
    },

    // type 1: 普通门店  2:新门店  3新增二级
    toStoreApplyPage(type) {
      this.showMoreAction = false;
      if (type === 1) {
        this.$u.route({
          url: 'pages/apply/store/newStore',
          params: {
            DealerId: this.currentDealer.DealerId,
            Level: this.currentDealer.Level
          }
        });
      }

      if (type === 2) {
        this.$u.route({
          url: 'pages/apply/store/newStore',
          params: {
            DealerId: this.currentDealer.DealerId,
            Level: this.currentDealer.Level,
            IsNewStore: 1
          }
        });
      }
      if (type === 3) {
        this.$u.route({
          url: 'pages/apply/store/index',
          params: {
            DealerId: this.currentDealer.DealerId,
            Level: this.currentDealer.Level,
            IsStore: 0
          }
        });
      }
    },

    // 1 关停  2并转
    toClosePage(type) {
      this.showMoreAction = false;
      this.$u.route({
        url: 'pages/home/dealer/closeAndShift/index',
        params: {
          DealerId: this.currentDealer.DealerId,
          Level: this.currentDealer.Level,
          Type: type
        }
      });
    }
  }
};
</script>

<style>
page {
  background-color: #edeff2;
}
</style>
<style lang="scss" scoped>
.customer-list {
  margin-top: 20rpx;
}

.customer-item {
  padding: 30rpx 30rpx;
  border-radius: 12rpx;
  background-color: #ffffff;
  color: #2e2f32;
  font-size: 26rpx;
  margin-bottom: 20rpx;

  .name {
    font-size: 32rpx;
    font-family: NotoSansHans;
    font-weight: bold;
    color: #ff7a23;
    line-height: 19px;
    margin-bottom: 30rpx;
  }

  .btn-group {
    text-align: right;
  }
}

.placeholder-text {
  color: rgb(192, 196, 204);
  font-size: 28rpx;
}

.close {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
}
</style>
